<template>
  <div class="expand-demo">
    <h2>Div 展开收缩效果示例</h2>
    
    <!-- 基础展开收缩 -->
    <div class="demo-section">
      <h3>1. 基础展开收缩</h3>
      <div class="demo-content">
        <div class="expand-box">
          <div class="header" @click="toggleBasic">
            <span>{{ isBasicExpanded ? '收起' : '展开' }}</span>
            <i :class="['arrow', isBasicExpanded ? 'up' : 'down']"></i>
          </div>
          <transition name="expand">
            <div v-show="isBasicExpanded" class="content">
              这是一段可以展开收缩的内容。
              这是一段可以展开收缩的内容。
              这是一段可以展开收缩的内容。
            </div>
          </transition>
        </div>
      </div>
    </div>

    <!-- 手风琴效果 -->
    <div class="demo-section">
      <h3>2. 手风琴效果</h3>
      <div class="demo-content">
        <div class="accordion">
          <div v-for="(item, index) in accordionItems" 
               :key="index" 
               class="accordion-item">
            <div class="header" @click="toggleAccordion(index)">
              <span>{{ item.title }}</span>
              <i :class="['arrow', item.expanded ? 'up' : 'down']"></i>
            </div>
            <transition name="expand">
              <div v-show="item.expanded" class="content">
                {{ item.content }}
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>

    <!-- 平滑展开 -->
    <div class="demo-section">
      <h3>3. 平滑展开效果</h3>
      <div class="demo-content">
        <div class="smooth-expand">
          <div class="header" @click="toggleSmooth">
            <span>{{ isSmoothExpanded ? '收起' : '展开' }}</span>
            <i :class="['arrow', isSmoothExpanded ? 'up' : 'down']"></i>
          </div>
          <div class="content-wrapper" ref="wrapper" :style="smoothStyle">
            <div class="content" ref="smoothContent">
              <div class="content-inner">
                <h4>平滑展开内容</h4>
                <p>这是一段使用height实现平滑展开效果的内容。</p>
                <p>通过精确计算高度，实现更流畅的动画效果。</p>
                <p>可以包含任意内容，高度会自动适应。</p>
                <div class="demo-box">
                  <button class="demo-btn">示例按钮</button>
                  <p>更多内容...</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 左右展开收缩 -->
    <div class="demo-section">
      <h3>4. 左右展开收缩效果</h3>
      <div class="demo-content horizontal-container">
        <!-- 从左侧展开 -->
        <div class="horizontal-expand left-expand">
          <div class="header" @click="toggleLeft">
            <i :class="['arrow', isLeftExpanded ? 'right' : 'left']"></i>
            <span>{{ isLeftExpanded ? '收起' : '展开' }}</span>
          </div>
          <transition name="slide-left">
            <div v-show="isLeftExpanded" class="content horizontal-content">
              <div class="content-inner">
                <h4>左侧展开面板</h4>
                <p>这是从左侧展开的内容面板。</p>
                <p>可以放置任意内容。</p>
                <button class="demo-btn">示例按钮</button>
              </div>
            </div>
          </transition>
        </div>

        <!-- 中间内容 -->
        <div class="main-content">
          <p>这是主要内容区域</p>
          <p>左右两侧都可以展开收缩</p>
        </div>

        <!-- 从右侧展开 -->
        <div class="horizontal-expand right-expand">
          <div class="header" @click="toggleRight">
            <span>{{ isRightExpanded ? '收起' : '展开' }}</span>
            <i :class="['arrow', isRightExpanded ? 'left' : 'right']"></i>
          </div>
          <transition name="slide-right">
            <div v-show="isRightExpanded" class="content horizontal-content">
              <div class="content-inner">
                <h4>右侧展开面板</h4>
                <p>这是从右侧展开的内容面板。</p>
                <p>可以放置任意内容。</p>
                <button class="demo-btn">示例按钮</button>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExpandDemo',
  
  data() {
    return {
      isBasicExpanded: false,
      isSmoothExpanded: false,
      contentHeight: 0,
      accordionItems: [
        {
          title: '第一项',
          content: '这是第一项的内容。这是第一项的内容。这是第一项的内容。',
          expanded: false
        },
        {
          title: '第二项',
          content: '这是第二项的内容。这是第二项的内容。这是第二项的内容。',
          expanded: false
        },
        {
          title: '第三项',
          content: '这是第三项的内容。这是第三项的内容。这是第三项的内容。',
          expanded: false
        }
      ],
      isLeftExpanded: false,
      isRightExpanded: false,
      smoothStyle: {
        height: '0px',
        overflow: 'hidden'
      }
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.contentHeight = this.$refs.smoothContent.offsetHeight;
    });
  },

  methods: {
    toggleBasic() {
      this.isBasicExpanded = !this.isBasicExpanded;
    },

    toggleSmooth() {
      this.isSmoothExpanded = !this.isSmoothExpanded;
      this.$nextTick(() => {
        const height = this.isSmoothExpanded ? this.$refs.smoothContent.offsetHeight : 0;
        this.smoothStyle = {
          height: `${height}px`,
          overflow: 'hidden',
          transition: 'height 0.3s ease-in-out'
        };
      });
    },

    toggleAccordion(index) {
      this.accordionItems = this.accordionItems.map((item, i) => ({
        ...item,
        expanded: i === index ? !item.expanded : false
      }));
    },

    toggleLeft() {
      this.isLeftExpanded = !this.isLeftExpanded;
    },

    toggleRight() {
      this.isRightExpanded = !this.isRightExpanded;
    }
  }
};
</script>

<style scoped>
.expand-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #1976d2;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.demo-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h3 {
  color: #1976d2;
  margin: 0 0 15px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.header:hover {
  background-color: #e0e0e0;
}

.arrow {
  border: solid #666;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transition: transform 0.3s;
}

.arrow.down {
  transform: rotate(45deg);
}

.arrow.up {
  transform: rotate(-135deg);
}

.content {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

/* 展开收缩动画 */
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.expand-enter,
.expand-leave-to {
  height: 0;
  opacity: 0;
}

/* 平滑展开效果 */
.smooth-expand .content {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 手风琴样式 */
.accordion-item {
  margin-bottom: 10px;
}

.accordion-item:last-child {
  margin-bottom: 0;
}

.accordion-item .header {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.accordion-item .content {
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

/* 修改左右展开收缩相关样式 */
.horizontal-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 300px;
  position: relative;
}

.main-content {
  flex: 1;
  padding: 20px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 4px;
  margin: 0 20px;
}

.horizontal-expand {
  position: relative;
  width: 40px;
  transition: width 0.3s ease-in-out;
}

.horizontal-expand .header {
  width: 40px;
  height: 100px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1976d2;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.horizontal-expand .header:hover {
  background: #1565c0;
}

.horizontal-content {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.left-expand .horizontal-content {
  left: 50px;
}

.right-expand .horizontal-content {
  right: 50px;
}

.content-inner {
  padding: 20px;
}

.content-inner h4 {
  margin: 0 0 15px 0;
  color: #1976d2;
}

.demo-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.demo-btn:hover {
  background: #1565c0;
}

/* 修改箭头样式 */
.horizontal-expand .arrow {
  border-width: 0 3px 3px 0;
  padding: 4px;
  margin: 0 8px;
}

/* 左右展开动画 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease-in-out;
  opacity: 1;
}

.slide-left-enter,
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter,
.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .horizontal-container {
    flex-direction: column;
  }

  .horizontal-expand {
    width: 100%;
    margin: 10px 0;
  }

  .horizontal-expand .header {
    width: 100%;
    height: 40px;
    writing-mode: horizontal-tb;
  }

  .horizontal-content {
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
  }

  .main-content {
    margin: 20px 0;
  }

  .left-expand .horizontal-content,
  .right-expand .horizontal-content {
    left: 0;
    right: 0;
  }

  .slide-left-enter,
  .slide-left-leave-to,
  .slide-right-enter,
  .slide-right-leave-to {
    transform: translateY(-20px);
  }
}

/* 修改平滑展开相关样式 */
.smooth-expand {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
}

.smooth-expand .header {
  border: none;
  background: #1976d2;
  color: white;
  margin: 0;
  border-radius: 4px 4px 0 0;
}

.smooth-expand .header:hover {
  background: #1565c0;
}

.smooth-expand .arrow {
  border-color: white;
}

.content-wrapper {
  background: white;
}

.smooth-expand .content {
  background: white;
  border: none;
  border-radius: 0 0 4px 4px;
}

.content-inner {
  padding: 20px;
}

.content-inner h4 {
  margin: 0 0 15px 0;
  color: #1976d2;
}

.content-inner p {
  margin: 10px 0;
  line-height: 1.5;
}

.demo-box {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

/* 确保过渡效果平滑 */
.content-wrapper {
  will-change: height;
}

@media screen and (max-width: 768px) {
  .smooth-expand {
    margin: 0;
  }
}
</style>